<template>
	<div class="dashboard-container main_spac">
		<div
			:class="[{ mainin_box_nodata: main_loading }, 'mainin_ul']"
			@click="mainin_ex = false"
			v-loading="main_loading"
			element-loading-text="拼命加载中..."
		>
			<ul class="boxha">
				<template v-for="(item, index) in main_index">
					<!-- 今日简报 -->
					<li v-if="item == 1" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_h">
								<span class="main_title">今日简报</span>
								<div class="bigdata">
									<el-tooltip
										class="item"
										effect="dark"
										content="数据大屏"
										placement="top"
									>
										<img
											src="@/assets/images/big_data.png"
											style="width: 19px; height: 19px"
											@click.stop="jumpbigdata(1)"
										/>
									</el-tooltip>
								</div>
							</div>
							<div class="mainin_jb">
								<ul class="boxha">
									<li>
										<div class="mainin_jbm">
											<h3>新增学校</h3>
											<p>
												<span>3</span>
											</p>
										</div>
									</li>
									<li>
										<div class="mainin_jbm">
											<h3>总销售额</h3>
											<p>
												<span>20000</span>
											</p>
										</div>
									</li>
									<li>
										<div class="mainin_jbm">
											<h3>同比增长</h3>
											<p>
												<span>30%</span>
											</p>
										</div>
									</li>
									<li>
										<div class="mainin_jbm">
											<h3>用户下单率</h3>
											<p>
												<span>80%</span>
											</p>
										</div>
									</li>
									<li>
										<div class="mainin_jbm">
											<h3>客单价</h3>
											<p>
												<span>8000</span>
											</p>
										</div>
									</li>
									<li>
										<div class="mainin_jbm">
											<h3>&nbsp;</h3>
											<p>
												<span>...</span>
											</p>
										</div>
									</li>
									
								</ul>
							</div>
						</div>
					</li>
					<!--待处理  -->
					<li v-if="item == 2" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_h">
								<span class="main_title">待处理</span>
							</div>
							<div class="mainin_jx">
								<ul class="boxha">
									<li>
										<div class="mainin_jxb">
											<router-link
												:to="{ name: 'order_list', params: { activeName: 1 } }"
											>
												<h3>待审核商品</h3>
												<p>
													<span>{{ list.order_check }}</span>
												</p>
											</router-link>
										</div>
									</li>
									<li>
										<div class="mainin_jxb">
											<router-link
												:to="{ name: 'order_list', params: { activeName: 2 } }"
											>
												<h3>竞价排名</h3>
												<p>
													<span>{{ list.order_send }}</span>
												</p>
											</router-link>
										</div>
									</li>
									<li>
										<div class="mainin_jxb">
											<router-link
												:to="{
													name: 'order_list',
													params: { activeName: 3 },
												}"
											>
												<h3>学校审核结果</h3>
												<p>
													<span>{{ list.order_receive }}</span>
												</p>
											</router-link>
										</div>
									</li>

									<li>
										<div class="mainin_jxb">
											<router-link
												:to="{ name: 'user_list', params: { status: 3 } }"
											>
												<h3>广告管理</h3>
												<p>
													<span>{{ list.member_check }}</span>
												</p>
											</router-link>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<!-- 天气挂件 -->
					<li v-if="item == 3" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxk">
								<div class="boxdq">
									<div class="mainin_h">
										<span class="main_title">天气</span>
									</div>
								</div>
								<div class="mainin_qxk_p industry_article_box">
									<div class="weather">
										<weather></weather>
									</div>
								</div>
							</div>
						</div>
					</li>
					<!-- 下单金额曲线 -->
					<li v-if="item == 4" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxs">
								<div class="box">
									<div class="mainin_h">
										<span class="main_title">竞价排名</span>
									</div>
									<div class="mainin_qxs_a">
										<el-select
											v-model.trim="cycleid1"
											class="wid80"
											@change="cycleChange(1, cycleid1)"
										>
											<el-option
												v-for="(item, index) in cycledata"
												:key="index"
												:label="item.name"
												:value="item.id"
											></el-option>
										</el-select>
									</div>
								</div>
								<div id="chartColumn1" style="width: 100%; height: 320px"></div>
							</div>
						</div>
					</li>
					<!-- 单品 TOP5 -->
					<li v-if="item == 5" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_xlb">
								<div class="box">
									<div class="mainin_h">
										<span class="main_title">单品 TOP5</span>
									</div>
									<div class="mainin_qxs_a">
										<el-select
											v-model.trim="cycleid2"
											class="wid80"
											@change="cycleChange(2, cycleid2)"
										>
											<el-option
												v-for="(item, index) in cycledata"
												:key="index"
												:label="item.name"
												:value="item.id"
											></el-option>
										</el-select>
									</div>
								</div>
								<div id="chartColumn3" style="width: 100%; height: 340px"></div>
							</div>
						</div>
					</li>
					<!-- 各大类占比 -->
					<li v-if="item == 6" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_xlb">
								<div class="box">
									<div div class="mainin_h">
										<span class="main_title">各大类占比</span>
									</div>
									<div class="mainin_qxs_a">
										<el-select
											v-model.trim="cycleid3"
											class="wid80"
											@change="cycleChange(3, cycleid3)"
										>
											<el-option
												v-for="(item, index) in cycledata"
												:key="index"
												:label="item.name"
												:value="item.id"
											></el-option>
										</el-select>
									</div>
								</div>
								<div id="chartColumn2" style="width: 100%; height: 340px"></div>
							</div>
						</div>
					</li>
					<!-- 系统预警 -->
					<li v-if="item == 7" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxk">
								<div class="boxdq">
									<div class="mainin_h">
										<span class="main_title">系统预警</span>
									</div>
								</div>
								<div class="mainin_qxk_p industry_article_box">
									<div class="warning_container">
										<div
											class="warning_item"
											v-if="
												warning.sms_notice == 1 &&
												warning.sms_num < warning.sms_notice_number
											"
										>
											<p>{{ warning.sms_num }}<span>条</span></p>
											<p>短信余量提醒</p>
										</div>
										<div class="warning_item" v-if="warning.bill_count > 0">
											<p>{{ warning.bill_count }}<span>条</span></p>
											<p>待支付佣金账单</p>
										</div>
										<div
											@click="handleJump('contract_period')"
											class="warning_item"
											v-if="warning.contract_period"
										>
											<p>{{ warning.contract_period }}<span>天</span></p>
											<p>合约期剩余</p>
										</div>
										<div class="warning_item" v-if="warning.sms_set != 1">
											<h3 @click="handleJump('sms')">短信账号未配置</h3>
										</div>
										<div class="warning_item" v-if="warning.wx_set != 1">
											<h3 @click="handleJump('wx')">微信公众号未配置</h3>
										</div>
										<div class="warning_item" v-if="warning.union_set != 1">
											<h3 @click="handleJump('union')">在线支付未配置</h3>
										</div>
										<div class="warning_item" v-if="warning.baidu_set != 1">
											<h3 @click="handleJump('baidu')">百度地图未配置</h3>
										</div>
										<div class="warning_item" v-if="warning.site_set != 1">
											<h3 @click="handleJump('site')">平台信息未配置完整</h3>
										</div>
									</div>
								</div>
								<div class="yjfk_no_data" v-if="warning_item_length == 0">
									<img :src="no_data_img" alt="" />
								</div>
							</div>
						</div>
					</li>
					<!-- 意见反馈 -->
					<li v-if="item == 8" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxk">
								<div class="boxdq">
									<div class="mainin_h">
										<span class="main_title">意见反馈</span>
									</div>
								</div>

								<div class="mainin_qxk_p" v-if="list.feedback.length > 0">
									<ul>
										<li
											class="boxdq"
											v-for="(item, index) in list.feedback"
											:key="index"
											@click="feedback(index, item.content)"
										>
											<div class="mainin_qxk_pl box">
												<span
													v-if="item.unread == 0 ? true : false"
													class="red_dot"
												></span>
												<img :src="item.avatar ? item.avatar : puzzleImg" />
												<div class="mainin_qxk_plw">
													<p class="ellipsis">
														{{ item.member.nickname }}
													</p>
													<span class="ellipsis">{{ item.content }}</span>
												</div>
											</div>
											<div :class="['mainin_qxk_pr']">
												<p>{{ parseTime(item.created_at, "{y}-{m}-{d}") }}</p>
												<p><i class="el-icon-arrow-right"></i></p>
											</div>
										</li>
									</ul>
									<router-link class="advice_more" to="/morefeedback"
										>更多 ></router-link
									>
								</div>
								<div class="yjfk_no_data" v-if="list.feedback.length == 0">
									<img :src="no_data_img" alt="" />
								</div>
							</div>
						</div>
					</li>
					<!-- 行业资讯 -->
					<li v-if="item == 9" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxk">
								<div class="boxdq">
									<div class="mainin_h">
										<span class="main_title">行业资讯</span>
									</div>
								</div>
								<div
									class="mainin_qxk_p industry_article_box"
									v-if="article.length > 0"
								>
									<ul>
										<li v-for="item in article" :key="item.id">
											<div class="industry_article">
												<div class="left">
													<p @click="handleArticle(item.id, 1)">
														{{ item.title }}
													</p>
													<p>
														{{ item.intro }}
													</p>
												</div>
												<div class="right">
													{{ parseTime(item.add_time, "{y}-{m}-{d}") }}
												</div>
											</div>
										</li>
									</ul>
									<a
										href="https://www.caidj.net/news/4"
										target="_blank"
										class="advice_more"
									>
										更多资讯<i class="el-icon-d-arrow-right"></i
									></a>
								</div>
								<div class="yjfk_no_data" v-if="article.length == 0">
									<img :src="no_data_img" alt="" />
								</div>
							</div>
						</div>
					</li>

					<!-- 更新记录 -->
					<li v-if="item == 10" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxk">
								<div class="boxdq">
									<div class="mainin_h">
										<span class="main_title">更新记录</span>
									</div>
								</div>
								<div
									class="mainin_qxk_p industry_article_box"
									v-if="upgrade.length > 0"
								>
									<ul>
										<li v-for="(item, index) in upgrade" :key="index">
											<div class="upgrade">
												<div class="left">
													[{{ parseTime(item.created_at) }}]
												</div>
												<div class="right">
													<p @click="jumpUpdate(item)">
														{{ item.title }}
													</p>
												</div>
											</div>
										</li>
									</ul>
									<a
										@click="jumpbigdata(2)"
										target="_blank"
										class="advice_more"
									>
										更多记录<i class="el-icon-d-arrow-right"></i
									></a>
								</div>
								<div class="yjfk_no_data" v-if="upgrade.length == 0">
									<img :src="no_data_img" alt="" />
								</div>
							</div>
						</div>
					</li>

					<!-- 帮助中心 -->
					<li v-if="item == 11" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxk">
								<div class="boxdq">
									<div class="mainin_h">
										<span class="main_title">帮助中心</span>
									</div>
								</div>
								<div class="mainin_qxk_p industry_article_box">
									<div class="help_center">
										<div class="image_top">
											<div class="left">
												<img
													@click="handleHelpCenter(1)"
													src="@/assets/images/index_handlebook.png"
													alt="使用手册"
												/>
												<p>使用手册</p>
											</div>
											<div class="right">
												<img
													@click="handleHelpCenter(2)"
													src="@/assets/images/index_question.png"
													alt="常见问题"
												/>
												<p>常见问题</p>
											</div>
										</div>
										<div class="link_bottom">
											<p>帮助热线：400-656-9798</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<!-- 招标信息 -->
					<li v-if="item == 12" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxk">
								<div class="boxdq">
									<div class="mainin_h">
										<span class="main_title">招标信息</span>
									</div>
								</div>
								<div
									class="mainin_qxk_p industry_article_box"
									v-if="tender.length > 0"
								>
									<ul>
										<li v-for="item in tender" :key="item.id">
											<div class="industry_article tender_industry_article">
												<div class="left">
													<p @click="handleArticle(item, 2)">
														{{ item.title }}
													</p>
												</div>
												<div class="right tender_right">
													{{ parseTime(item.created_at, "{y}-{m}-{d}") }}
												</div>
											</div>
										</li>
									</ul>
									<router-link class="advice_more" to="/moretender"
										>更多信息 ></router-link
									>
								</div>
								<div class="yjfk_no_data" v-if="tender.length == 0">
									<img :src="no_data_img" alt="" />
								</div>
							</div>
						</div>
					</li>
				</template>
			</ul>
		</div>
		<!-- 页面设置 -->
		<div
			:class="[{ on: mainin_xs }, ' mainin_xs']"
			@click.stop="mainin_ex = true"
			@mouseover="mainin_xs = true"
			@mouseleave="mainin_xs = false"
		>
			<i class="el-icon-arrow-up"></i>显示
		</div>
		<div :class="[{ on: mainin_ex }, ' mainin_ex']">
			<div class="mainin_exv">
				<h3>显示</h3>
				<div class="mainin_exa">
					<el-checkbox-group v-model="type">
						<ul>
							<draggable
								v-model="group"
								@chang="change"
								@start="start"
								@end="end"
								:move="move"
								:options="{
									animation: 150,
									sort: true,
									forceFallback: true,
									ghostClass: 'sortable-ghost',
									fallbackOnBody: true,
									handle: '.svg-icon',
								}"
							>
								<li class="boxdq" v-for="(item, index) in group" :key="index">
									<el-checkbox :label="item.id" :disabled="item.disabled">{{
										item.name
									}}</el-checkbox>
									<svg-icon icon-class="index_move" />
								</li>
							</draggable>
						</ul>
					</el-checkbox-group>
				</div>
			</div>
			<div class="mainin_exb">
				<el-button type="primary" @click="determine" v-repeatClick
					>确定</el-button
				>
				<el-button @click="recovery" v-repeatClick>恢复</el-button>
				<el-button @click="mainin_ex = false">取消</el-button>
			</div>
		</div>

		<!-- 图片显示查看器 -->
		<el-dialog
			title="意见反馈"
			:visible.sync="showViewer"
			width="600px"
			top="105px"
			style="min-height: 300px"
		>
			<div class="dialog_main">
				<div class="dialog_content">
					<p>
						{{ feedContent }}
					</p>
				</div>
				<div class="dialog_img">
					<el-image
						style="width: 150px; height: 150px"
						v-for="(item, index) in picList"
						:key="index"
						:src="item"
						:preview-src-list="picList"
					>
						>
					</el-image>
				</div>
			</div>
		</el-dialog>

		<!-- 没有数据图片 -->
		<img v-show="false" ref="img" src="@/assets/images/no_data.png" alt="" />
	</div>
</template>

<script>
	import ElImageViewer from "element-ui/packages/image/src/image-viewer";
	import { mapGetters, mapMutations } from "vuex";
	import echarts from "echarts";
	import { EleResize } from "@/utils/esresize.js";
	import draggable from "vuedraggable";
	import { chart, unread, changeChart, setIndex } from "@/api/index/index";
	import { sms_info_stock } from "@/api/global/globalSystem";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { puzzleImg, unpaid_order } from "@/api/currency";
	import { parseTime } from "@/utils/index";
	import { indexHeader } from "@/options/headerSet.js";
	import Weather from "./components/weather.vue";

	export default {
		name: "index",
		computed: {
			...mapGetters([
				"name",
				"avatar",
				"indexSetting",
				"domestic",
				"contract_period",
				"is_expired",
				"companyInfo",
			]),
		},
		components: {
			draggable,
			ElImageViewer,
			Weather,
		},
		data() {
			return {
				parseTime,
				indexHeader,
				indexHeader_recovery: JSON.parse(JSON.stringify(indexHeader)),
				main_loading: false,
				// 帮助文档
				helper_show: false,

				no_data_img: require("@/assets/images/no_data.png"),
				no_data_options: {
					graphic: [
						{
							type: "image",
							id: "logo",
							left: "center",
							top: "50",
							bounding: "raw",
							style: {
								image: require("@/assets/images/no_data.png"),
								width: 92,
								opacity: 1,
							},
						},
					],
				},
				// 图片显示查看器
				showViewer: false,
				feedContent: "", //反馈详情
				picList: [],
				// 筛选
				cycledata: [
					{
						id: 1,
						name: "一周",
					},
					{
						id: 2,
						name: "半个月",
					},
					{
						id: 3,
						name: "一个月",
					},
				],
				cycleid1: 1,
				cycleid2: 1,
				cycleid3: 1,
				// 列表数据
				list: {
					feedback: [],
				},
				puzzleImg,

				// 更新记录
				notice: [
					{
						name: "测试",
						time: "2020-04-02",
					},
				],
				// 行业资讯
				article: [],
				article_url: "",
				// 招标信息
				tender: [],
				// 更新记录
				upgrade: [],
				// 预警信息
				warning: {
					union_set: 0,
					sms_set: 0,
					wx_set: 0,
					baidu_set: 0,
					site_set: 0,
					sms_num: 0,
					sms_notice: 0,
					sms_notice_number: 80,
					bill_count: 0,
					contract_period: null,
					contract_period_url: null,
				},
				warning_item_length: 0,
				// 页面设置
				mainin_xs: false,
				mainin_ex: false,
				// 板块勾选
				type: [1, 2, 3, 4, 5, 6],

				// 板块内容
				group: indexHeader,
				// 显示板块

				main_index: [1, 2, 3, 4, 5, 6],
			};
		},
		watch: {
			domestic: {
				handler(val) {
					// let message = `您当前合约期还剩${this.contract_period}天即将到期 请及时续费！`;
					let message = "您的佣金账单还尚未支付，请及时支付";
					if (val.status == "notice") {
						this.$notify({
							title: "系统提示",
							type: "warning",
							position: "bottom-right",
							message: message,
							duration: 0,
						});
					}
				},
				deep: true,
				immediate: true,
			},
			is_expired: {
				handler(val) {
					let message = `您当前合约期还剩${this.contract_period}天即将到期 请及时续费！`;
					if (val) {
						this.$notify({
							title: "系统提示",
							type: "warning",
							position: "bottom-right",
							message: message,
							offset: 80,
							duration: 0,
						});
					}
				},
				deep: true,
				immediate: true,
			},
		},
		methods: {
			...mapMutations({
				SET_INDEX_SETTING: "user/SET_INDEX_SETTING",
			}),
			unpaid_order() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name
				);
				unpaid_order(data).then((res) => {
					console.log(res);
				});
			},
			// 帮助文档
			handleHelp() {
				this.helper_show = !this.helper_show;
			},
			// 监听拖动
			change(event) {
				// console.log('change', event)
			},
			start(event) {
				// console.log('start', event)
			},
			end(event) {
				// console.log('end', event, this.group)
			},
			move(event, orgin) {
				// console.log('move', event, orgin)
			},
			// 页面设置
			setIndex(setting, sort) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ setting: setting, sort: sort }
				);
				let company_id = this.indexSetting.company_id;
				let form = {
					company_id: company_id,
					setting: setting,
					sort: sort,
				};
				setIndex(data).then((res) => {
					if (res.errcode == 0) {
						this.SET_INDEX_SETTING(form);
					} else {
						this.$message.error("失败");
					}
				});
			},
			// 页面设置确定
			determine() {
				var data = [];
				this.group.map((e) => {
					this.type.map((m) => {
						if (e.id == m) {
							data.push(e.id);
						}
					});
				});
				console.log("我执行了");
				this.main_index = data;
				let setting = data.join(",");
				let arr = [];
				this.group.map((e) => {
					arr.push(e.id);
				});
				let sort = arr.join(",");
				this.setIndex(setting, sort);

				for (var i = 1; i < 4; i++) {
					if (document.getElementById("chartColumn" + i)) {
						document
							.getElementById("chartColumn" + i)
							.removeAttribute("_echarts_instance_");
						document.getElementById("chartColumn" + i).innerHTML = "";
					}
				}
				setTimeout(() => {
					this.chartColumn();
				});
				this.mainin_ex = false;
			},
			// 页面设置恢复
			recovery() {
				for (var i = 1; i < 4; i++) {
					if (document.getElementById("chartColumn" + i)) {
						document
							.getElementById("chartColumn" + i)
							.removeAttribute("_echarts_instance_");
						document.getElementById("chartColumn" + i).innerHTML = "";
					}
				}
				this.main_index = [1, 2, 3, 4, 5, 6];
				// this.main_index = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

				this.group = this.indexHeader_recovery;

				this.type = [1, 2, 3, 4, 5, 6];
				let arry = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
				let setting = this.main_index.join(",");
				let sort = arry.join(",");
				this.setIndex(setting, sort);
				setTimeout(() => {
					this.chartColumn();
				});
				this.mainin_ex = false;
			},
			// 只适用图表方法
			drawLine(dom, option) {
				if (document.getElementById(dom)) {
					// 基于准备好的dom，初始化echarts实例
					let myChart = echarts.init(document.getElementById(dom));
					let resizeDiv = document.getElementById(dom);

					// 清空画布
					myChart.clear();

					// 绘制图表
					myChart.setOption(option);

					let listener = function () {
						myChart.resize();
					};
					EleResize.on(resizeDiv, listener);
				}
			},
			// 图表
			chartColumn(id) {
				// 折线图
				let dom1 = "chartColumn1";
				let option1 = {
					tooltip: {
						show: true,
						trigger: "axis",
						formatter: "{a} <br/>{b} : {c}",
						axisPointer: {
							type: "cross",
							label: {
								backgroundColor: "#03A98E",
							},
						},
					},
					grid: {
						top: 20,
						bottom: 20,
						left: 60,
						right: 40,
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						axisLabel: {
							show: true,
							textStyle: {
								color: "#333",
							},
						},
						axisTick: {
							show: false,
						},
						data:
							this.list.sales.length != 0
								? Object.entries(this.list.sales).map((e) => e[0])
								: [],
					},
					yAxis: {
						axisLine: {
							lineStyle: {
								color: "rgba(107,107,107,0.37)",
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "#ccc",
								type: "dashed",
							},
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: "#333",
							},
						},
						axisTick: {
							show: false,
						},
						type: "value",
					},
					series: [
						{
							name: "下单金额",
							data:
								this.list.sales.length != 0
									? Object.entries(this.list.sales).map((e) => e[1])
									: [],
							symbol: "circle",
							symbolSize: 10,
							smooth: true, //这句就是让曲线变平滑的
							type: "line",
							lineStyle: {
								normal: {
									color: "#03A98E",
								},
							},
							itemStyle: {
								normal: {
									borderWidth: 3,
									borderColor: "#BAFFF4",
									color: "#03A98E",
									areaStyle: {
										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
											{
												offset: 0,
												color: "rgba(3,169,142,0)",
											},
											{
												offset: 1,
												color: "rgba(3,169,142,0.25)",
											},
										]),
									},
								},
							},
						},
					],
				};
				// 柱状图
				let dom2 = "chartColumn3";
				let option2 = {
					tooltip: {
						show: true,
						trigger: "axis",
						formatter: "{a} <br/>{b} : {c}",
						axisPointer: {
							type: "cross",
							label: {
								backgroundColor: "#03A98E",
							},
						},
					},
					grid: {
						top: 20,
						bottom: 40,
						left: 60,
						right: 40,
					},
					xAxis: {
						type: "category",
						splitLine: {
							show: false,
							lineStyle: {
								color: "#eaeaea",
							},
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: "#333",
							},
						},
						axisTick: {
							show: false,
						},
						data:
							this.list.single.length != 0
								? this.list.single.map((e) => e.name)
								: [],
					},
					yAxis: {
						splitLine: {
							show: true,
							lineStyle: {
								color: "#ccc",
								type: "dashed",
							},
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: "#333",
							},
						},
						axisLine: {
							lineStyle: {
								color: "rgba(107,107,107,0.37)",
							},
						},
						axisTick: {
							show: false,
						},
						type: "value",
					},
					series: [
						{
							name: "下单金额",
							data:
								this.list.single.length != 0
									? this.list.single.map((e) => e.order_money)
									: [],
							type: "bar",
							barWidth: 20,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[
											{
												offset: 0,
												color: "#6DF0DA",
											},
											{
												offset: 1,
												color: "#05AA8F",
											},
										],
										false
									),
								},
							},
						},
					],
				};
				// 饼图
				let dom3 = "chartColumn2";
				var rich = {
					name: {
						color: "#333",
						fontSize: 14,
						padding: [0, 5],
						fontWeight: "400",
						align: "right",
					},
					percent: {
						color: "#fff",
						align: "right",
						fontSize: 14,
						fontWeight: "500",
						padding: [0, 5],
					},
					hr: {
						borderColor: "#333",
						width: "100%",
						borderWidth: 1,
						height: 0,
					},
				};
				let option3 = {
					backgroundColor: "#fff",
					tooltip: {
						trigger: "item",
						position: ["50%", "50%"],
						formatter: "{a} <br/>{b}: {c}%",
					},
					grid: {
						top: 0,
					},
					series: [
						{
							name: "下单金额占比",
							type: "pie",
							radius: [0, "70%"],
							color: "#49dbc4",
							labelLine: {
								normal: {
									lineStyle: {
										color: "#333",
									},
								},
							},
							label: {
								normal: {
									formatter: (params) => {
										return "{name|" + params.name + "}";
									},
									rich: rich,
								},
							},
							data: this.list.category,
						},
						{
							name: "下单金额占比",
							type: "pie",
							color: "#49dbc4",
							radius: [0, "70%"],
							label: {
								normal: {
									position: "inner",
									formatter: (params) => {
										return "{percent|" + params.percent.toFixed(0) + "%}";
									},
									rich: rich,
								},
							},
							itemStyle: {
								normal: {
									borderColor: "#fff",
									borderWidth: 5,
								},
								emphasis: {
									borderWidth: 0,
									shadowBlur: 5,
									shadowOffsetX: 0,
									shadowColor: "rgba(0, 0, 0, 0.5)",
								},
							},
							data: this.list.category,
						},
					],
				};

				let newarr = [];
				for (const key in this.list.sales) {
					if (this.list.sales[key] != 0) {
						newarr.push(this.list.sales[key]);
					}
				}
				if (newarr.length == 0) {
					option1 = this.no_data_options;
				}
				if (this.list.single.length == 0) {
					option2 = this.no_data_options;
				}
				if (this.list.category.length == 0) {
					option3 = this.no_data_options;
				}
				if (id) {
					if (id == 1) {
						this.drawLine(dom1, option1);
					}
					if (id == 2) {
						this.drawLine(dom2, option2);
					}
					if (id == 3) {
						this.drawLine(dom3, option3);
					}
				} else {
					this.drawLine(dom1, option1);
					this.drawLine(dom2, option2);
					this.drawLine(dom3, option3);
				}
			},

			// 选择日期
			cycleChange(type, id) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name, { type: type, id: id })) +
								apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ type: type, id: id }
				);
				changeChart(data).then((res) => {
					if (res.errcode == 0) {
						if (type == 1) {
							this.list.sales = res.data;
						}
						if (type == 2) {
							this.list.single = res.data;
						}
						if (type == 3) {
							this.list.category = res.data;
						}
						// 图表
						this.chartColumn(type);
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			// 意见反馈查看
			feedback(index, content) {
				this.picList = [];
				this.picList = this.list.feedback[index].img.map((e) => e.img);

				let id = this.list.feedback[index].id;
				this.feedContent = content;
				this.$nextTick(() => {
					this.showViewer = true;
					this.unread(id).then(() => {
						this.list.feedback[index].unread = 1;
					});
				});
			},
			// 查看更改状态
			unread(id) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: id }
				);
				return new Promise((resolv, reject) => {
					unread(data).then((res) => {
						if (res.errcode == 0) {
							resolv();
						}
					});
				});
			},
			chart() {
				this.main_loading = true;

				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name
				);
				chart(data).then((res) => {
					this.main_loading = false;
					if (res.errcode == 0) {
						res.data.feedback.map((e) => {
							if (e.img) {
								e.img.map((p) => {
									p.img = this.avatar.domain + p.img;
								});
							}
							e.avatar = "";
							if (e.member.avatar) {
								e.avatar = this.avatar.domain + "/" + e.member.avatar;
							} else {
								e.avatar = e.member.wx_avatar;
							}
						});
						this.article = res.data.article;
						this.article_url = res.data.article_url;
						this.tender = res.data.tender;
						this.upgrade = res.data.upgrade;

						this.warning.union_set = res.data.union_set;
						this.warning.sms_set = res.data.sms_set;
						this.warning.wx_set = res.data.wx_set;
						this.warning.baidu_set = res.data.baidu_set;
						this.warning.site_set = res.data.site_set;
						this.warning.sms_notice = res.data.sms_notice;
						this.warning.sms_notice_number = res.data.sms_notice_number;
						this.warning.bill_count = res.data.bill_count;
						this.warning.contract_period = res.data.contract_period;
						this.warning.contract_period_url = res.data.contract_period_url;
						this.list = res.data;
						// 图表
						this.chartColumn();
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			// 短息余量
			sms_info_stock() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name
				);
				sms_info_stock(data).then((res) => {
					if (res.errcode == 0) {
						this.warning.sms_num = res.data.balance;
					}
				});
			},
			closeViewer() {
				this.showViewer = false;
			},
			// 行业资讯跳转 && 招标信息
			handleArticle(params, type) {
				switch (type) {
					case 1:
						let url = this.article_url + params;
						window.open(url);
						break;
					case 2:
						url = params.url;
						window.open(url);
						break;

					default:
						break;
				}
			},
			// 帮助中心跳转
			handleHelpCenter(type) {
				let url = "";
				let modeList = {
					1: "批发",
					2: "城配",
					3: "软件",
				};
				let form = {
					type: this.companyInfo.model,
					product_type: 2,
					document_type: 1,
					name: modeList[this.companyInfo.model],
				};
				let str = "";

				switch (type) {
					case 1:
						form.document_type = 1;
						for (const key in form) {
							str += `${key}=${form[key]}&`;
						}
						// url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
						url = "http://help.caidj.net.cn/#/index/detail/?${str}";
						break;
					case 2:
						form.document_type = 2;
						for (const key in form) {
							str += `${key}=${form[key]}&`;
						}
						// url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
						url = "http://help.caidj.net.cn/#/index/detail/?${str}";
						break;
				}
				window.open(url);
			},
			// 预警跳转
			handleJump(type) {
				let obj = {
					sms: "2",
					wx: "3",
					union: "0",
					baidu: "1",
				};
				let url1 = "global_system_config";
				let url2 = "global_Third";
				if (type == "site") {
					this.$router.push({
						name: url1,
					});
				} else if (type == "contract_period") {
					let url = this.warning.contract_period_url;
					url ? window.open(url) : "";
				} else {
					this.$router.push({
						name: url2,
						params: {
							type: obj[type],
						},
					});
				}
			},
			// 数据大屏 & 帮助文档
			jumpbigdata(type) {
				let modeList = {
					1: "批发",
					2: "城配",
					3: "软件",
				};
				switch (type) {
					case 1:
						this.$router.push({
							path: "/bigdata",
						});
						break;

					case 2:
						//  href="http://help.caidj.net.cn/"
						let form = {
							type: this.companyInfo.model,
							product_type: 2,
							document_type: 3,
							name: modeList[this.companyInfo.model],
						};
						let str = "";
						for (const key in form) {
							str += `${key}=${form[key]}&`;
						}
						str = str.substring(0, str.lastIndexOf("&"));
						let url = `http://help.caidj.net.cn/#/index/detail/?${str}`;
						// let url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
						window.open(url);
						break;
				}
			},
			// 更新记录跳转
			jumpUpdate(item) {
				let modeList = {
					1: "批发",
					2: "城配",
					3: "软件",
				};
				let form = {
					type: item.type,
					product_type: item.product_type,
					document_type: item.document_type,
					id: item.id,
					name: modeList[this.companyInfo.model],
				};
				let str = "";
				for (const key in form) {
					str += `${key}=${form[key]}&`;
				}
				str = str.substring(0, str.lastIndexOf("&"));
				let url = `http://help.caidj.net.cn/#/index/detail?${str}`;
				window.open(url);
			},
		},
		mounted() {
			let indexSetting = this.indexSetting.setting;

			if (indexSetting) {
				let arr = indexSetting.split(",");
				this.main_index = arr;
				this.type = arr.map(Number);
			}
			let sort = this.indexSetting.sort.split(",");
			sort = sort.map(Number);

			this.group.sort((pre, next) => {
				const p = sort.indexOf(pre.id);
				const n = sort.indexOf(next.id);
				return p - n;
			});
			// 图表
			this.chart();
			// 短息
			this.sms_info_stock();
			//为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
			document.body.ondrop = function (event) {
				event.preventDefault();
				event.stopPropagation();
			};
			let ids = {
				first_id: 0,
				second_id: 0,
				title: "帮助文档",
			};
			ids = JSON.stringify(ids);
			localStorage.setItem("cc", ids);
		},
		created() {},
		updated() {
			let warning_container = document.querySelector(".warning_container");

			if (warning_container) {
				let warning_item = warning_container.querySelectorAll(".warning_item");
				this.warning_item_length = warning_item.length;
			}
		},
	};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.dashboard-container {
	.mainin_ul {
		margin-top: 15px;
		& > ul {
			margin-left: -5px;
			margin-right: -5px;
			& > li {
				width: 33.33%;
				height: 420px;
				overflow: hidden;
				margin-bottom: 15px;
				.mainin_ulb {
					margin-left: 5px;
					margin-right: 5px;
					padding-left: 10px;
					padding-right: 10px;
					padding-top: 20px;
					background: $white;
					height: 100%;
				}
				.mainin_h {
					font-size: 14px;
					color: #181818;
					font-weight: bold;
					.main_title {
						&::before {
							content: "";
							display: inline-block;
							width: 5px;
							height: 15px;
							background-color: #19b098;
							vertical-align: top;
							margin-right: 8px;
						}
					}
					.bigdata {
						float: right;
						padding-right: 8px;
					}
				}
				.mainin_qxs_a {
					margin-left: 10px;
					margin-top: -8px;
					/deep/.el-input__inner {
						border: 0;
						font-size: $font_12;
						padding-right: 10px;
					}
					/deep/.el-select__caret {
						color: $colour_18;
						line-height: 31px;
					}
				}

				.mainin_hy {
					.mainin_hya {
						font-size: $font_14;
						color: $menuActiveText;
					}
					ul {
						margin-top: 20px;
						li {
							height: 24px;
							line-height: 24px;
							margin-top: 10px;
							a {
								font-size: $font_14;
								color: $colour_18;
								span {
									margin-right: 10px;
								}
								&:hover {
									color: $menuActiveText;
								}
							}
						}
					}
				}
				.mainin_jb {
					ul {
						margin-left: -10px;
						margin-top: 10px;
						li {
							width: 33.33%;
							margin-top: 7px;

							.mainin_jbm {
								padding-top: 15px;
								margin-left: 10px;
								margin-right: 10px;
								padding-left: 30px;
								padding-right: 15px;
								padding-bottom: 2px;
								min-height: 78px;
								background-color: #f7f9fa;
								background-image: url("./../../assets/images/t1.png");
								background-position: 9px 12px;
								background-repeat: no-repeat;
								background-size: 16px;
								&:hover {
									box-shadow: 0px 2px 9px 1px rgba(10, 2, 4, 0.29);
								}
								h3 {
									font-size: 13px;
									font-family: PingFang SC;
									font-weight: 400;
									color: #4c4c4c;
								}
								p {
									font-size: $font_16;
									color: $menuActiveText;
									min-height: 40px;
									align-items: center;
									display: flex;
									margin-top: 10px;
									span {
										display: block;
										width: 100%;
										word-wrap: break-word;
										font-size: 18px;
										font-family: PingFang SC;
										font-weight: bold;
										color: #19b098;
									}
								}
							}
							&:nth-child(1) .mainin_jbm,
							&:nth-child(4) .mainin_jbm,
							&:nth-child(7) .mainin_jbm {
								background-image: url("./../../assets/images/t3.png");
							}
							&:nth-child(6) .mainin_jbm {
								background-image: none;
							}
							&:nth-child(2) .mainin_jbm,
							&:nth-child(5) .mainin_jbm,
							&:nth-child(8) .mainin_jbm,
							&:nth-child(9) .mainin_jbm {
								background-image: url("./../../assets/images/t2.png");
							}

							&:nth-child(3) .mainin_jbm,
							&:nth-child(10) .mainin_jbm,
							&:nth-child(11) .mainin_jbm,
							&:nth-child(12) .mainin_jbm {
								background-image: url("./../../assets/images/t1.png");
							}
						}
					}
				}
				.mainin_jx {
					ul {
						// margin-top: 18px;
						margin-left: 10px;
						margin-right: 10px;
						li {
							width: 33.33%;
							.mainin_jxb {
								// padding-top: 10px;
								margin-top: 20px;
								// padding-bottom: 10px;
								// padding-left: 15px;
								margin-right: 20px;

								a {
									display: block;
									background: url("./../../assets/images/1.png") bottom 5px
										right 5px no-repeat;
									background-color: #f7f9fa;
									padding: 10px 10px;
									box-sizing: border-box;
									background-size: 40px;
									&:hover {
										box-shadow: 0px 0px 9px 1px rgba(10, 2, 5, 0.42);
									}
								}
								h3 {
									font-size: $font_14;
									color: $colour_18;
									display: inline-block;
									vertical-align: middle;

									em {
										display: inline-block;
										width: 10px;
										height: 10px;
										border-radius: 2px;
										background: #daaaec;
										margin-right: 10px;
									}
								}
								p {
									font-size: $font_16;
									color: $colour_18;
									min-height: 40px;
									align-items: center;
									display: flex;
									margin-top: 15px;

									span {
										display: block;
										width: 100%;
										word-wrap: break-word;

										font-size: 16px;
										font-family: PingFang SC;
										font-weight: bold;
										color: #2b2b2b;
									}
								}
							}
							&:nth-child(2) {
								a {
									background-image: url("./../../assets/images/2.png");
								}
							}
							&:nth-child(3) {
								a {
									background-image: url("./../../assets/images/3.png");
								}
							}
							&:nth-child(4) {
								a {
									background-image: url("./../../assets/images/9.png");
								}
							}
							&:nth-child(5) {
								a {
									background-image: url("./../../assets/images/4.png");
								}
							}
							&:nth-child(6) {
								a {
									background-image: url("./../../assets/images/5.png");
								}
							}
							&:nth-child(7) {
								a {
									background-image: url("./../../assets/images/6.png");
								}
							}
							&:nth-child(8) {
								a {
									background-image: url("./../../assets/images/8.png");
								}
							}
							&:nth-child(9) {
								a {
									background-image: url("./../../assets/images/7.png");
								}
							}
						}
					}
				}
				.mainin_qxs {
					#chartColumn1 {
						margin-top: 10px;
					}
				}
				.mainin_qxk {
					background: $white;
					padding-bottom: 10px;
					.mainin_qxk_p {
						margin-top: 20px;
						ul {
							height: 332px;
							overflow-y: auto;
							padding-left: 10px;
							padding-right: 10px;
							li {
								border-bottom: 1px solid $colour_f4;
								padding-top: 10px;
								padding-bottom: 10px;
								.mainin_qxk_pl {
									width: calc(100% - 80px);
									position: relative;
									.red_dot {
										position: absolute;
										top: 50%;
										left: -10px;
										width: 6px;
										height: 6px;
										border-radius: 50%;
										background-color: red;
									}
									img {
										width: 48px;
										height: 48px;
										object-fit: cover;
										margin-right: 10px;
										border-radius: 1000px;
									}
									.mainin_qxk_plw {
										width: 80%;
										p {
											font-size: 14px;
											color: #333;
											height: 20px;
											line-height: 20px;
											margin-top: 5px;
										}
										span {
											font-size: 14px;
											color: #555;
											display: block;
											height: 20px;
											line-height: 20px;
											margin-top: 5px;
										}
									}
								}
								.mainin_qxk_pr {
									text-align: right;
									font-size: 14px;
									color: #4f4f4f;
									&.read {
										color: #00c388;
									}
									p {
										&:last-child {
											padding-top: 8px;
											.el-icon-arrow-right:before {
												font-weight: 700;
											}
										}
									}
								}
								&:hover {
									cursor: pointer;
								}
								&:last-child {
									border: 0;
								}
							}
						}
					}
					.yjfk_no_data {
						width: 100%;
						text-align: center;
						padding-top: 60px;
					}
				}
				.mainin_xlb {
					height: 285px;
					padding-bottom: 10px;
					#chartColumn1,
					#chartColumn2,
					#chartColumn3 {
						margin-top: 20px;
					}
					.mainin_xlb_p {
						border: 1px solid $colour_f4;
						margin-top: 20px;
						ul {
							height: 340px;
							overflow-y: auto;
							padding-left: 10px;
							padding-right: 10px;
							li {
								padding-top: 10px;
								padding-bottom: 10px;
								font-size: 14px;
								color: #333;
								.mainin_xlb_pw {
									width: calc(100% - 80px);
									p {
										width: calc(100% - 85px);
										margin-left: 5px;
									}
								}
								em {
									text-align: center;
									color: #555;
								}
							}
						}
					}
				}
			}
		}
	}
	.mainin_xs {
		position: fixed;
		right: 0;
		top: 20%;
		z-index: 9;
		width: 54px;
		height: 54px;
		line-height: 54px;
		border-radius: 1000px;
		background: $menuActiveText;
		font-size: $font_12;
		color: $white;
		transition: all 0.5s;
		transform: translate3d(50%, 0, 0);
		box-shadow: 0px 3px 10px 0px #413f3f3d;
		i {
			font-size: 22px;
			transform: rotate(-90deg);
			vertical-align: -4px;
		}
		&:hover {
			cursor: pointer;
		}
		&.on {
			transform: translate3d(0, 0, 0);
		}
	}
	.mainin_ex {
		position: fixed;
		width: 230px;
		height: 100%;
		background: $white;
		box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
		top: 0;
		right: 0;
		z-index: 9;
		transition: all 0.5s;
		transform: translate3d(100%, 0, 0);
		&.on {
			transform: translate3d(0, 0, 0);
		}
		.sortable-ghost {
			background: $white;
			box-shadow: 0px 2px 8px 0px #413f3f1a;
		}
		// 显示影子元素
		.sortable-chosen {
			&:hover {
				cursor: move;
			}
		}
		.mainin_exv {
			position: absolute;
			width: 100%;
			height: calc(100% - 60px);
			overflow-y: auto;
			h3 {
				font-size: $font_16;
				color: $colour_18;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid $colour_e6;
				padding-left: 20px;
			}
			.mainin_exa {
				margin-top: 15px;
				ul {
					li {
						align-items: center;
						padding-left: 20px;
						padding-right: 10px;
						/deep/.el-checkbox {
							margin-top: 10px;
							margin-bottom: 10px;
						}
						/deep/.el-checkbox__label {
							padding-left: 15px;
						}
						.svg-icon {
							/* 通过设置 font-size 来改变图标大小 */
							font-size: $font_18;
							/* 图标和文字相邻时，垂直对齐 */
							vertical-align: -0.15em;
							/* 通过设置 color 来改变 SVG 的颜色/fill */
							fill: $colour_3;
							/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
              normalize.css 中也包含这行 */
							overflow: hidden;
							&:hover {
								cursor: move;
							}
						}
					}
				}
			}
		}
		.mainin_exb {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 55px;
			text-align: center;
			/deep/.el-button--default {
				margin-top: 12px;
				border-color: $subActive;
				color: $menuText;
				&:hover {
					border-color: $menuActiveText;
					color: $menuActiveText;
				}
			}
		}
	}

	// 为加载完数据时
	.mainin_box_nodata {
		height: calc(100vh - 60px);
		overflow: hidden;
	}
}
// 意见反馈更多
.advice_more {
	font-size: 14px;
	color: #00c388;
	text-align: right;
	float: right;
	padding-top: 8px;
	padding-right: 5px;
}
// 图片查看器
/deep/.el-dialog {
	.el-dialog__header {
		border-bottom: 1px solid #ccc;
		padding: 10px 20px 10px;
		display: flex;
		align-items: center;
	}
	.el-dialog__title {
		font-size: 16px;
		vertical-align: bottom;
		&::before {
			content: " ";
			width: 6px;
			height: 15px;
			margin-right: 15px;
			background-color: #00c388;
			display: inline-block;
			vertical-align: middle;
		}
	}
	.el-dialog__headerbtn {
		top: 15px;
	}
	.el-dialog__body {
		padding: 15px 20px 20px;
	}
}
.feedback_dialog {
	display: flex;
	flex-direction: column;
	.text {
		margin: 10px;
	}
}
.dialog_main {
	.dialog_content {
		p {
			font-size: 14px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #646464;
			line-height: 23px;
			text-indent: 2rem;
		}
	}
	.dialog_img {
		margin-top: 15px;
		/deep/.el-image {
			margin: 0 15px;
		}
	}
	.dialog_footer {
		float: right;
	}
}

/* 帮助文档 */
.tips_box {
	position: fixed;
	bottom: 10px;
	right: 10px;
	.helper_icon {
		float: right;
		img {
			width: 81px;
			height: 81px;
		}
	}
	.help_panel {
		width: 404px;
		height: 632px;
		background-color: #ffffff;
		position: relative;
		bottom: 0;
		right: 81px;
		box-shadow: 2;
		box-shadow: 0px 0px 7px 1px rgba(10, 2, 5, 0.17);
		.top {
			height: 40px;
			line-height: 40px;
			padding: 0 13px;
			text-align: center;
			background-color: #19b098;
			h3 {
				font-size: 14px;
				color: #ffffff;
				display: inline;
			}
			.close {
				float: right;
				line-height: 40px;
				color: #ffffff;
			}
		}
	}
}
.help_panel-enter-active {
	transition: opacity 0.3s;
}
.help_panel-enter {
	opacity: 0;
}
.help_panel-leave-active {
	transition: opacity 0.3s;
}
.help_panel-leave-to {
	opacity: 0;
}
/deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
	box-shadow: none !important;
}

/* 行业资讯 */
.industry_article_box {
	li {
		padding: 7px 0;
	}
}

.industry_article {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	&.tender_industry_article {
		align-items: center;
	}
	.left {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		p {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.5;
			cursor: pointer;
			&:first-child {
				font-size: 15px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #070707;
			}
			&:last-child {
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #777373;
			}
		}
	}
	.right {
		width: 100px;
		text-align: right;
		height: 12px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9c9c9c;
		padding-left: 10px;
	}
	.tender_right {
		height: 100%;
		text-align: none;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
}
/* 更新记录 */
.upgrade {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	.left {
		width: 175px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9c9c9c;
	}
	.right {
		flex: 1;
		// white-space: nowrap;
		overflow: hidden;
		p {
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;

			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #070707;
		}
	}
}
/* 帮助中心 */
.help_center {
	height: 340px;
	position: relative;
	.image_top {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-top: 60px;
		.left,
		.right {
			padding: 0 50px;
			text-align: center;
		}
		img {
			width: 100px;
		}
		p {
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #767676;
			line-height: 23px;
			padding-top: 20px;
		}
	}
	.link_bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 30px;
		p {
			width: 100%;
			text-align: center;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #19b098;
		}
	}
}
/* 天气 */
.weather {
	width: 100%;
	height: 340px;
}
/* 预警 */
.warning_container {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	.warning_item {
		width: 146px;
		height: 82px;
		background: url("./../../assets/images/warning_bg.png") no-repeat;
		background-size: 100% 100%;
		padding: 18px 17px;
		margin-right: 20px;
		margin-bottom: 20px;
		p {
			&:first-child {
				font-size: 22px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #363636;
				span {
					font-size: 16px;
				}
			}
			&:last-child {
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #bbbbbb;
				margin-top: 8px;
			}
		}
		h3 {
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #363636;
			line-height: 1.5;
			cursor: pointer;
		}
	}
}
</style>